<template>
  <div class="home-container app-container">
    <div class="function">
      <div class="item_top">
        <router-link to="/roles" class="img_box">
          <img src="@/assets/images/menu6.png" alt="">
        </router-link>
        <span class="base-text">家庭档案</span>
      </div>
      <div class="item_top">
        <router-link to="/myRecord" class="img_box">
          <img src="@/assets/images/item3.png" alt="">
        </router-link>
        <span class="base-text">个人档案</span>
      </div>
      <div class="item_top">
        <router-link to="/diseases" class="img_box">
          <img src="@/assets/images/item4.png" alt="">
        </router-link>
        <span class="base-text">高血压</span>
      </div>
      <div class="item_top">
        <a href="javascript:;" class="img_box">
          <img src="@/assets/images/menu5.png" alt="">
        </a>
        <span class="base-text">综合统计</span>
      </div>
      <div class="item_top">
        <a href="javascript:;" class="img_box">
          <img src="@/assets/images/item7.png" alt="">
        </a>
        <span class="base-text">孕产妇</span>
      </div>
      <div class="item_top">
        <a href="javascript:;" class="img_box">
          <img src="@/assets/images/item8.png" alt="">
        </a>
        <span class="base-text">儿童</span>
      </div>
      <div class="item_top">
        <a href="javascript:;" class="img_box">
          <img src="@/assets/images/item6.png" alt="">
        </a>
        <span class="base-text">疾控管理</span>
      </div>
      <div class="item_top">
        <a href="javascript:;" class="img_box">
          <img src="@/assets/images/item7.png" alt="">
        </a>
        <span class="base-text">卫生</span>
      </div>
      <div class="item_top">
        <a href="javascript:;" class="img_box">
          <img src="@/assets/images/item5.png" alt="">
        </a>
        <span class="base-text">设置</span>
      </div>
    </div>
    <div class="box_bottom">
      <div class="item_container">
        <h4 class="title_name title">任务提醒</h4>
        <ul class="infinite-list">
          <li v-for="(item, index) in taskData" :key="index">
            <a href="javascript:;">
              <span class="task-order">{{ index }}</span>
              {{ item.title }}
            </a>
            <el-tag :type="item.type" effect="dark">{{ item.num }}</el-tag>
          </li>
        </ul>
      </div>
      <div class="item_container">
        <h4 class="title_name title">工作进度</h4>
        <ul class="infinite-list">
          <li v-for="(item, index) in taskData" :key="index">
            <a href="javascript:;">
              <span class="task-order">{{ index }}</span>
              {{ item.title }}
            </a>
            <el-tag :type="item.type" effect="dark">{{ item.num }}</el-tag>
          </li>
        </ul>
      </div>
      <div class="item_container">
        <h4 class="title_name title">综合任务提醒</h4>
        <ul class="infinite-list">
          <li v-for="(item, index) in taskData" :key="index">
            <a href="javascript:;">
              <span class="task-order">{{ index }}</span>
              {{ item.title }}
            </a>
            <el-tag :type="item.type" effect="dark">{{ item.num }}</el-tag>
          </li>
        </ul>
      </div>
      <div class="item_container">
        <h4 class="title_name title">疾控管理进度</h4>
        <ul class="infinite-list">
          <li v-for="(item, index) in taskData" :key="index">
            <a href="javascript:;">
              <span class="task-order">{{ index }}</span>
              {{ item.title }}
            </a>
            <el-tag :type="item.type" effect="dark">{{ item.num }}</el-tag>
          </li>
        </ul>
      </div>
      <div class="item_container">
        <h4 class="title_name title">慢病工作量</h4>
        <rank />
      </div>
      <div class="item_container">
        <h4 class="title_name title">体检工作量</h4>
        <seller />
      </div>
    </div>
  </div>
</template>
<script>
import Rank from '@/components/Echarts/Rank.vue'
import Seller from '@/components/Echarts/Seller.vue'
export default {
  components: {
    Rank,
    Seller
  },
  data() {
    return {
      // 常用模块跳转
      useData: [
        {
          path: '/roles',
          img: '@/assets/images/menu6.png',
          title: '家庭档案'
        },
        {
          path: '/myRecord',
          img: '../assets/images/item3.png',
          title: '个人档案'
        },
        {
          path: '/diseases',
          img: '../assets/images/item4.png',
          title: '高血压建档'
        }
      ],
      taskData: [
        {
          title: '高血压随访提醒',
          num: 23,
          type: ''
        },
        {
          title: '出入院提醒',
          num: 35,
          type: 'warning'
        },
        {
          title: '重点人群医疗行为',
          num: 10,
          type: 'success'
        },
        {
          title: '上传传染病报告',
          num: 35,
          type: 'danger'
        },
        {
          title: '高血压随访提醒',
          num: 6,
          type: 'info'
        }
      ],
      // 所有角色列表数据
      HealthTableData: [
        {
          CSRQ: '1969-10-05',
          DHHM: '13886071529',
          GRDAID: '420119201018085202',
          GUID: '911415066CC0DBCDE050007F0100FBA6',
          HZLXMC: '本地人员',
          JZDZ: '湖北省武汉市武汉经济技术开发区沌口街滨湖社区32-2-601',
          NL: '51',
          ROW_ID: 1,
          XB: '3',
          XM: '景庆林',
          YLJGMC: '沌阳社区卫生服务中心',
          ZJHM: '410521196910052030',
          type: []
        },
        {
          CSRQ: '1984-08-28',
          GRDAID: '420119201103047001',
          GUID: '911415066CC1DBCDE050007F0100FBA6',
          HZLXMC: '本地人员',
          JZDZ: '水木清华社区',
          NL: '36',
          ROW_ID: 2,
          XB: '4',
          XM: '曾恒',
          YLJGMC: '沌阳社区卫生服务中心',
          ZJHM: '429004198408280334',
          type: []
        },
        {
          CSRQ: '1972-01-30',
          GRDAID: '420119201130082401',
          GUID: '911415066CC2DBCDE050007F0100FBA6',
          HZLXMC: '本地人员',
          JZDZ: '佳和6栋3单元502',
          NL: '48',
          ROW_ID: 3,
          XB: '3',
          XM: '许华兵',
          YLJGMC: '沌阳社区卫生服务中心',
          ZJHM: '420121197201301211',
          type: []
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.home-container {
  .function {
    min-height: 120px;
    background: #fff;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .item_top {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin: 10px;
      .img_box {
        width: 60px;
        height: 60px;
        display: block;
        border-radius: 50%;
        img {
          width: 100%;
          height: 60px;
          display: block;
          transition: all 0.6s;
          &:hover {
            transform: scale(1.2);
          }
        }
      }
      span {
        margin-top: 5px;
        color: #333;
      }
    }
  }
  .box_bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item_container {
      margin-top: 15px;
      width: 49%;
      background: #fff;
      border-radius: 5px;
      .title_name {
        border-left: 4px solid #3192f3;
        padding-left: 10px;

        margin: 20px 10px 0 20px;
      }
      .infinite-list {
        margin: 0;
        height: 220px;
        padding: 10px 20px 20px 12px;
        overflow: hidden;
        li {
          display: flex;
          align-items: center;
          padding: 5px 0;
          justify-content: space-between;
          border-bottom: 1px dashed #eee;
          a {
            display: inline-block;
            width: 80%;
            color: #666;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-decoration: none;
            cursor: pointer;
            .task-order {
              display: inline-block;
              background-color: #3192f3;
              width: 20px;
              height: 20px;
              color: #fff;
              font-size: 12px;
              text-align: center;
              vertical-align: middle;
              line-height: 20px;
              border-radius: 50%;
              margin-right: 20px;
            }
          }
          .el-tag {
            height: 20px;
            padding: 0 5px;
            line-height: 20px;
          }
        }
      }
    }
  }
}
</style>
